const classNames = require('classnames')
const _ = require('../utils')
const {
  inputBehavior,
  formItemBehavior,
  listItemBehavior,
  listParentBehavior,
} = require('../behaviors')

_.create('input', {
  options: {
    multipleSlots: true,
  },

  data: {
    bordered: true,
    error: false,
  },

  behaviors: ['wx://form-field', listItemBehavior, formItemBehavior, inputBehavior],

  properties: {
    prefix: String,
    suffix: String,
    extra: String,
    type: String,
    password: Boolean,
    confirmHold: Boolean,
    outlined: Boolean,
    maxLength: { type: Number, value: 140 },
  },

  relations: {
    listParent: {
      type: 'parent',
      target: listParentBehavior,
    },

    '../form-validator/index': {
      type: 'ancestor',
    },
  },

  computed: {
    classes(data) {
      const { classPrefix, inputFocus, outlined, error, value, placeholder } = data
      const classes = classNames(classPrefix, {
        [`${classPrefix}-outlined`]: outlined,
        [`${classPrefix}-focus`]: inputFocus,
        [`${classPrefix}-error`]: error,
        [`${classPrefix}-raised`]: value || placeholder,
      })
      return classes
    },

    noBordered(data) {
      const { bordered, outlined, helperText, isLast } = data
      return (isLast || !bordered || outlined) && !helperText
    },
  },
})
